<template>
  <div class="permission">
    <el-tree
      ref="tree"
      :check-strictly="checkStrictly"
      :data="routesData"
      :props="defaultProps"
      @check="treeCheck"
      show-checkbox
      default-expand-all
      node-key="path"
      class="permission-tree"
    />
  </div>
</template>

<script>
import { asyncRoutes } from "@/router";
import userApi from "@/api/user";
import roleApi from "@/api/role";
import { generateTitle } from "@/utils/i18n";
export default {
  name: "vuecomponent",
  components: {},
  data() {
    return {
      checkStrictly: true,
      defaultProps: {
        children: "children",
        label: "label"//"label",
      },
    };
  },
  model: {
    prop: "value",
    event: "valuechange",
  },
  props: {
    value: {
      type: Object,
    },
    target: null,
    //用户权限还是角色权限
    permissionType: {
      type: String,
      default: "user", //role
    },
  },

  computed: {
    routesData() {
      let me = this;
      function _clearupData(parent, data, children) {
        for (let i = 0; i < data.length; i++) {
          let item = data[i];
          if (item.hidden) continue;
          let child = {};
          let routePath = item.path;
          // if (routePath) {
          //   if (routePath.startsWith("/")) {
          //     routePath = (parent ? parent.path : "") + item.path;
          //   } else {
          //     routePath = (parent ? parent.path : "") + "/" + item.path;
          //   }
          // }

          if (item.path && item.meta) {
            child = {
              children: [],
              path: routePath,
              label: me.generateTitle(item.meta.title),
            };
            children.push(child);
          }
          if (item.aliasChildren) {
            item.aliasChildren.forEach((element) => {
              data.forEach((dataElement) => {
                if (dataElement.name == element) {
                 var vchild = {
                    children: [],
                    path: dataElement.path,
                    label: me.generateTitle(dataElement.meta.title),
                  };
                  child.children.push(vchild);
                }
              });
            });
          }

          if (item.children) {
            if (item.meta) _clearupData(child, item.children, child.children);
            else {
              _clearupData(child, item.children, children);
            }
          }
        }
      }
      let result = [];
      _clearupData(null, asyncRoutes, result);
      return result;
    },
  },
  watch: {},
  methods: {
    generateTitle,
    treeCheck(data, treeCheckData) {
      //实现选中子节点后父节点也选中
      let checked = treeCheckData.checkedKeys;
      if (checked.indexOf(data.path) == -1) return;
      let parentChecked = [];
      let paths = data.path.split("/");
      let path="";
      paths.pop();
      while (paths.length > 0) {
        path = paths.join("/");
        if (path){
          parentChecked.push(paths.join("/"));
          this.$refs.tree.setChecked(path,true);
        }
        
        paths.pop();
      }
      //this.$refs.tree.setCheckedKeys(checked.concat(parentChecked));
    },
    getPermission() {
      return this.$refs.tree.getCheckedKeys();
    },
  },
  mounted() {
    let result = [];
    if (this.permissionType == "user") {
      userApi.getUserPermissions(this.target).then((res) => {
        let data = res.data.rows;
        data.forEach((element) => {
          result.push(element.funcid);
        });
        this.$refs.tree.setCheckedKeys(result);
      });
    } else if (this.permissionType == "role") {
      roleApi.getRolePermissions(this.target).then((res) => {
        let data = res.data.rows;
        data.forEach((element) => {
          result.push(element.funcid);
        });
        this.$refs.tree.setCheckedKeys(result);
      });
    }
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.permission {
  overflow: hidden;
}
.permission:hover {
  overflow: auto;
}
</style>

